<!--author:曲睿-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="header(title,keywords)">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="keywords" th:content="${keywords ?: commons.site_option('site_keywords')}"/>
    <meta name="description" th:content="${description ?:commons.site_option('site_description')}"/>
    <link rel="shortcut icon" th:href="@{/user/img/blog.png}"/>
    <link rel="apple-touch-icon" th:href="@{/user/img/apple-touch-icon.png}"/>
    <title><th:block th:text="${title ?: '首页'}+' - '+${commons.site_option('site_title','My Blog')}"></th:block></title>
    <link th:href="@{//cdn.bootcss.com/highlight.js/9.9.0/styles/xcode.min.css}" rel="stylesheet"/>
    <link th:href="@{/user/css/style.min.css}" rel="stylesheet"/>
    <script th:src="@{//cdn.bootcss.com/jquery/2.2.3/jquery.min.js}"></script>

    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>
        // JavaScript代码，用于处理点击事件并跳转到首页
        function redirectToIndex() {
            window.location.href = '/index.html'; // 更改成你的首页地址
        }
    </script>

    <style>
        .navbar-container {
            width: 960px; /* 设置导航栏容器的固定宽度为960像素，你可以根据需要调整 */
            margin: 0 auto; /* 居中显示 */
        }

        .header {
            display: flex;
            justify-content: center;
            width: 80%;
            margin-left: 150px;
            background: #f5f5f5;

        }
        .navbar-logo img {
            width: 40px; /* 设置图片宽度为100像素 */
            height: auto; /* 根据比例自动调整高度 */
        }
        .navbar-menu a {
            margin-right: 25px; /* 调整三个 a 标签之间的右外边距 */
            color: rgb(70, 100, 180);
            padding: 15px 50px;
            font: 500 24px '优设标题黑';
            border: none;
            outline: none;
            display: inline-block;
            z-index: 0;
        }
        .navbar-menu a {
            position: relative;
        }

        /* 新增样式 */
        .navbar-menu a:hover::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 3px; /* 选中效果的高度 */
            background-color: rgb(70, 100, 180); /* 选中效果的颜色 */
        }

        /* 新增样式 */
        .navbar-menu a:hover {
            color: rgb(70, 100, 180);


            /* 鼠标移动到链接上时的颜色 */
        }


    </style>
</head>
<body  gtools_scp_screen_capture_injected="true" th:class="${is_post}?'':'bg-grey' " >
<!--[if lt IE 8]>
<div class="browsehappy" role="dialog">
    当前网页 <strong>不支持</strong> 你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/" target="_blank">升级你的浏览器</a>。
</div>
<![endif]-->

<header id="header" class="header bg-white">
    <div class="navbar-container">
        <a  th:href="${commons.site_url('')} "  class="navbar-logo"
        onclick="redirectToIndex()">
            <img th:src="@{/user/img/blog.png}" alt="首页"/>
        </a>
        <div class="navbar-menu">

            <a th:href="${commons.site_url('/archives')}">归档</a>
            <a th:href="${commons.site_url('/links')}">友链</a>

            <a th:href="${commons.site_url('/about')}">关于</a>

        </div>

        <div class="navbar-search" onclick="" >
            <span class="icon-search"></span>
            <form role="search" onsubmit="return false;">
                <span class="search-box">
                    <input type="text" id="search-inp" class="input" placeholder="搜索..." maxlength="30"
                           autocomplete="off"/>
                </span>
            </form>

        </div>

        <div class="navbar-mobile-menu" onclick="">
            <span class="icon-menu cross"><span class="middle"></span></span>
            <ul>
                <li><a th:href="${commons.site_url('/archives')}">归档</a></li>
                <li><a th:href="${commons.site_url('/links')}">友链</a></li>
                <li><a th:href="${commons.site_url('/about')}">关于</a></li>
            </ul>
        </div>
    </div>
</header>
</body>
</html>